<template>
	<view class="index">
		<scroll-view class="scroll-view" scroll-y="true" refresher-enabled="true"
		  :refresher-triggered="scrollobj.triggered" refresher-background="lightgreen" 
			@refresherrefresh="pulldown" @scrolltolower="scrolltolower" >
			<!-- 胶囊子组件 -->
			<navNav :navobj="navobj"></navNav>
			
			<view class="ordertypelist">
				<view class="ordertype" v-for="(item,index) in 6" :key="index">
					<view class="on">0</view>
					<view class="down">待预约</view>
				</view>
			</view>
		
			<view class="xtorder">
				<view class="orderchoose" >
					<text @click="chooseorder(1)" :class="[isactive==1?'activeorderstyle':'orderstyle']">待上门</text>
					<text @click="chooseorder(2)" :class="[isactive==2?'activeorderstyle':'orderstyle']" style="margin-left: 30rpx;">待完成</text>
				</view>
				<view class="orderlist" v-for="(item,index) in 10" :key="index">
					<view class="order-title">
						<view class="order-title-left">
							等待预约上门时间
						</view>
						<view class="order-title-right">
							已接受一口价
						</view>
					</view>
					<view class="danhao">
						<view class="danhao-left">
							订单编号：
						</view>
						<view class="danhao-center">
							P3940988423
						</view>
						<view class="danhao-right">
							复制
						</view>
					</view>
					<view class="server">
						<view class="server-left">
						服务内容：
						</view>
						<view class="server-right">
							维修家电
						</view>
					</view>
					<view class="time">
						<view class="time-left">
							下单时间：
						</view>
						<view class="time-right">
						  2023-10-18 17:22
						</view>
					</view>
					<view class="yvyue">
						<view style="width: 10rpx;"></view>
						<view class="yytime">
							预约时间
						</view>
					</view>
				</view>

				
				
				<view class="zero">没有更多了~</view>
			</view>
			<view style="height: 200rpx;"></view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {reactive,ref,getCurrentInstance} from 'vue'
	import {onLoad} from "@dcloudio/uni-app"
	const {proxy} = getCurrentInstance()
	const navobj = reactive({
		title:'订单',
		image:false
	})
	
	const scrollobj = reactive({
		triggered:false,
		pageNum:1,
		pageSize:10,
		isloading:false,
		total:0,
		isjz:false,
		pulldown:false
	})
	const isactive = ref(1)
	const chooseorder=(id)=>{
		isactive.value = id
	}
	onLoad(()=>{
		
	})
	const lists = ref({
		list:[],
		total:0
	})
	//列表请求
	const contentListfun=async()=>{
		return
		scrollobj.isloading = true
		var data = {
			pageNum:scrollobj.pageNum,
			pageSize:scrollobj.pageSize,
			flowStatus:'PENDING_REV',
		}
		const result = await proxy.$api.contentlistAPi(data)
		if(result.code==200){
			console.log('服务订单列表',result);
			scrollobj.isloading = false
			if(result.rows.length>0){
				lists.list = [...lists.list,...result.rows]
			}
			uni.hideLoading()
			lists.total = result.total
		}
	}
	// 下拉刷新
	const pulldown=()=>{
		scrollobj.triggered=true
		scrollobj.pageNum = 1
		lists.list = []
		contentListfun()
	}
	//上拉加载
	const scrolltolower=()=>{
		if (scrollobj.total < 10) {
			proxy.$showToast('没有更多了')
			return
		}
		if (scrollobj.isloading) return;
			scrollobj.pageNum++;
			uni.showLoading({
				title: '加载中'
			});
		// 执行的函数↓
		contentListfun()
	}

</script>

<style lang="scss">
	page{
		background-color: #f5f5f5;
		overflow: hidden;
	}
	.scroll-view{
		height: 100vh;width: 750rpx;margin: 0 auto;
		.ordertypelist{
			width: 710rpx;margin: 0 auto;margin-top: 20rpx;height: 144rpx;justify-content: space-around;
			display: flex;align-items: center;background-color: #fff;border-radius: 10rpx;
			.ordertype{
				display: flex;flex-direction: column;align-items: center;justify-content: center;
				font-weight: 700;color: #3D3D3D;
				.on{
					font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;font-size: 32rpx;
				}
				.down{
					font-family: Source Han Sans, Source Han Sans;font-size: 24rpx;
				}
			}
		}
		.xtorder{
			width: 710rpx;margin:0 auto;margin-top: 30rpx;
			.zero{
				font-size: 20rpx; height: 100rpx;text-align: center;line-height: 90rpx;color: #ccc;
			}
			.orderchoose{
				display: flex;align-items: center;height: 80rpx;
			}
			.orderlist{
				width: 710rpx;height: 336rpx;background:#FFFFFF;border-radius: 20rpx;
				margin: 0 auto;margin-top: 20rpx;padding: 20rpx 40rpx;box-sizing: border-box;
				.order-title{
						display: flex;align-items: center;justify-content: space-between;line-height: 40rpx;
				 .order-title-left{
					 		font-family: Source Han Sans, Source Han Sans;font-weight: 700;font-size: 28rpx;color: #3D3D3D;
				 }
				 .order-title-right{
				 			font-family: Source Han Sans, Source Han Sans;font-weight: 400;font-size: 24rpx;color: #3662EC;
				 }
				}
			 }
			}
			.danhao{
				 display: flex;align-items: center;line-height: 34rpx;margin-top: 20rpx;
				 .danhao-left{
					 font-size: 24rpx;color: #ccc;
				 }
				 .danhao-center{
				 	 font-size: 24rpx;color: #3d3d3d;
				 }
				 .danhao-right{
				 	 font-size: 24rpx;color: #3662EC;margin-left: 20rpx;
				 }
			}
			.server{
				 display: flex;align-items: center;line-height: 34rpx;margin-top: 20rpx;
				 .server-left{
					 font-size: 24rpx;color: #ccc;
				 }
				 .server-right{
				 	 font-size: 24rpx;color: #3d3d3d
				 }
			}
			.time{
				 display: flex;align-items: center;line-height: 34rpx;margin-top: 20rpx;
				 .time-left{
					 font-size: 24rpx;color: #ccc;
				 }
				 .time-right{
				 	 font-size: 24rpx;color: #3d3d3d
				 }
			}
			.yvyue{
					display: flex;align-items: center;justify-content: space-between;
					.yytime{
						width: 156rpx;height: 54rpx;background: #3662EC;border-radius: 80rpx;
						text-align: center;line-height: 54rpx;margin-top: 40rpx;
						font-family: Source Han Sans, Source Han Sans;font-weight: 400;font-size: 24rpx;color: #FFFFFF;
					}
			}
			
			
	}
	.activeorderstyle{
		font-weight: 700;
		font-size: 28rpx;
		color: #3662EC;
	}
	.orderstyle{
		font-weight: 400;
		font-size: 28rpx;
		color: #3D3D3D;
		
	}

</style>
